<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>订单分析</title>
    <!-- 样式 -->
    <link rel="stylesheet" href="/backend/plugins/element-ui/index.css" />
    <link rel="stylesheet" href="/backend/styles/common.css" />
    <link rel="stylesheet" href="/backend/styles/page.css" />
    <style>
        #orderChart {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
<div id="order-analysis-app">
    <el-card shadow="hover">
        <h2>订单分析</h2>
        <div id="orderChart"></div>
    </el-card>
</div>

<!-- 脚本 -->
<script src="/backend/plugins/vue/vue.js"></script>
<script src="/backend/plugins/element-ui/index.js"></script>
<script src="/backend/plugins/echarts/echarts.min.js"></script>
<script src="/backend/plugins/axios/axios.min.js"></script>
<!-- 👇 这里添加全局定义 $axios -->
<script>
    window.$axios = axios;
</script>
<script src="../../api/order.js"></script>
<script>
    // 注册 Element UI（非常关键）
    Vue.use(ELEMENT);

    new Vue({
        el: '#order-analysis-app',
        data() {
            return {
                chart: null,
                orderData: null
            }
        },
        mounted() {
            // 页面 mounted 时初始化图表并监听窗口大小变化
            this.initChart();
            this.fetchOrderData();
            window.addEventListener('resize', this.resizeChart);
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.resizeChart);
        },
        methods: {
            initChart() {
                this.chart = echarts.init(document.getElementById('orderChart'));
            },
            fetchOrderData() {
                getOrderStatistics()
                    .then(res => {
                        const result = res.data; // axios 默认会把 response 外层的 data 提出来
                        console.log("后端返回：", result);

                        if (result.code === 1) {
                            this.orderData = result.data;
                            this.renderChart();
                        } else {
                            this.$message.error(result.msg || '获取订单统计数据失败');
                        }
                    })
                    .catch(err => {
                        console.error('请求出错:', err);
                        this.$message.error('请求失败，请稍后再试');
                    });
            },
            renderChart() {
                const option = {
                    title: {
                        text: '订单分析',
                        left: 'center'
                    },
                    tooltip: { trigger: 'axis' },
                    xAxis: {
                        type: 'category',
                        data: this.orderData.months
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '订单数',
                        type: 'bar',
                        data: this.orderData.orders,
                        itemStyle: {
                            color: '#73a373'
                        }
                    }]
                };
                this.chart.setOption(option);
                this.chart.resize(); // 确保渲染完成后进行 resize
            },
            resizeChart() {
                if (this.chart) {
                    this.chart.resize();
                }
            }
        }
    });
</script>
</body>
</html>
